import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

//导入 instance
import { instance } from '../../utils'

//导入withFormik
import { withFormik, Form, Field, ErrorMessage } from 'formik'

//导入 Yup
import * as Yup from 'yup'
//import { instance } from '../../utils/api'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  // state = {
  //   username: '',
  //   password: ''
  // }

  // //监听用户名发生变化的函数
  // getUserName = (e) => {
  //   console.log(e);
  //   e.persist()
  //   this.setState(() => {
  //     return {
  //       username: e.target.value
  //     }
  //   })
  // }
  // //监听密码发生变化的函数
  // getPassword = (e) => {
  //   e.persist()
  //   this.setState(() => {
  //     return {
  //       password: e.target.value
  //     }
  //   })
  // }

  //表单提交事件
  // handleSubmit = async e => {
  //   e.preventDefault()
  //   console.log(e);
  //   //获取用户名和密码，并且发起请求
  //   const { username, password } = this.state
  //   console.log(username, password);
  //   const { data: res } = await instance.post('/user/login', {
  //     username,
  //     password
  //   })
  //   console.log(res);
  //   const { status, body, description } = res
  //   if (status !== 200) {
  //     Toast.info(description, 2, null, false)
  //   } else {
  //     localStorage.setItem('hkzf_token', body.token)
  //     this.props.history.go(-1)
  //   }
  // }
  render() {
    //const { username, password } = this.state
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field className={styles.input} name="username" placeholder="请输入账号"></Field>
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            <ErrorMessage name='username' className={styles.error} component='div'></ErrorMessage>
            <div className={styles.formItem}>
              <Field className={styles.input} name="password" type="password" placeholder="请输入密码"></Field>
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            <ErrorMessage name='password' className={styles.error} component='div'></ErrorMessage>
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

Login = withFormik({
  //提供状态
  mapPropsToValues: () => ({ username: '', password: '' }),
  //表单的提交事件
  handleSubmit: async (values, { props }) => {
    console.log(values);
    //获取用户名和密码，并且发起请求
    const { username, password } = values
    console.log(username, password);
    const { data: res } = await instance.post('/user/login', {
      username,
      password
    })
    console.log(res);
    const { status, body, description } = res
    if (status !== 200) {
      Toast.info(description, 2, null, false)
    } else {
      localStorage.setItem('hkzf_token', body.token)

      /* 
        1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
        2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
      */
      console.log(props);
      if (!props.location.state) {
        //如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
        props.history.go(-1)
      } else {
        //如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
        props.history.replace(props.location.state.from.pathname)
      }
    }
  },
  //添加验证规则配置项
  validationSchema: Yup.object().shape({
    username: Yup.string().required('账号为必填项').matches(REG_UNAME, '长度为5到8位，只能出现数字，字母，下划线'),
    password: Yup.string().required('密码为必填项').matches(REG_PWD, '长度为5到12位，只能出现数字，字母，下划线'),
  })
})(Login)

export default Login
